<template>
  <view class="mine">
    <image :src="banner" style="width: 100%" />

    <!-- 联系我们 -->
    <view
      style="
        display: flex;
        flex-direction: column;
        gap: 30rpx;
        align-items: center;
        padding: 30rpx;
      "
    >
      <view
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20rpx;
        "
      >
        <view style="color: #d9d9d9"> — </view>
        <view style="font-weight: 700; font-size: 34rpx"> 联系我们 </view>
        <view style="color: #d9d9d9"> — </view>
      </view>
      <view style="font-size: 30rpx; color: #333">
        <view style="display: flex; align-items: center; gap: 10rpx">
          <view> {{ mobile1 }} </view>
          <van-icon name="qr" @click="handleCheck(1)" />
        </view>

        <view
          style="
            display: flex;
            align-items: center;
            gap: 10rpx;
            margin-top: 10rpx;
          "
        >
          <view> {{ mobile2 }} </view>
          <van-icon name="qr" @click="handleCheck(2)" />
        </view>
      </view>
    </view>

    <!-- 公司介绍 -->
    <view
      style="
        display: flex;
        flex-direction: column;
        gap: 30rpx;
        align-items: center;
        padding: 30rpx;
      "
    >
      <view
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20rpx;
        "
      >
        <view style="color: #d9d9d9"> — </view>
        <view style="font-weight: 700; font-size: 34rpx"> 公司介绍 </view>
        <view style="color: #d9d9d9"> — </view>
      </view>
      <view style="font-size: 28rpx; color: #333">
        {{ details }}
      </view>
    </view>

    <!-- 二维码 -->
    <view
      v-if="isPhoto"
      style="
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 9;
        background-color: rgba(76, 76, 76, 0.9);
      "
    >
      <view style="width: 100%; position: absolute; top: 18rpx; z-index: 2">
        <van-icon
          style="width: 42rpx; font-size: 42rpx; margin: 16rpx; color: #fff"
          name="cross"
          @click="closeVideo()"
        />
      </view>

      <!-- <image
        style="width: 100%; height: calc(100% - 300rpx); object-fit: contain"
        :src="qrcodeSrc"
        alt=""
      /> -->

      <image
        style="width: 100%; height: calc(100% - 300rpx); object-fit: contain"
        :src="qrcodeSrc"
        alt=""
        @longpress="handleLongPress"
        show-menu-by-longpress
      />
    </view>
  </view>
</template>

<script>
import { about } from '@/api/index'

export default {
  data() {
    return {
      banner: '',
      details: '',
      mobile1: '',
      mobile2: '',
      qrcode1: '',
      qrcode2: '',

      // 是否展示二维码
      isPhoto: false,
      // 二维码
      qrcodeSrc: '',
      // 分享标题
      shareTitle: '',
      // 分享图片
      shareImg: '',
    }
  },

  onShareAppMessage() {
    return {
      title: this.shareTitle,
      path: '/pages/index/index',
      imageUrl: this.shareImg,
    }
  },

  async created() {
    //关于我们
    const respOurs = await about()

    this.banner = respOurs.data.banner
    this.details = respOurs.data.details
    this.mobile1 = respOurs.data.mobile1
    this.mobile2 = respOurs.data.mobile2
    this.qrcode1 = respOurs.data.qrcode1
    this.qrcode2 = respOurs.data.qrcode2
    this.shareTitle = respOurs.data.share_title
    this.shareImg = respOurs.data.share_img
  },

  methods: {
    // 点击二维码图片
    handleCheck(i) {
      this.qrcodeSrc = i == 1 ? this.qrcode1 : this.qrcode2
      this.isPhoto = true
    },

    // 关闭二维码图片
    closeVideo() {
      this.isPhoto = false
    },

    handleLongPress() {
    // 可以在这里添加统计或额外逻辑
    console.log('用户长按了二维码');
  },
  },
}
</script>

<style scoped></style>
